<script setup>
import { ref } from 'vue'
import ProfileCard from './components/ProfileCard.vue' // 确保路径正确
const profiles = ref([
  {
    image: '../../../static/images/car.png',
    name: '婚恋顾问@柚子',
    description: '资深婚恋顾问',
  },
  {
    image: '../../../static/images/car.png',
    name: '婚恋顾问@笑语',
    description: '金牌婚恋顾问',
  },
  {
    image: '../../../static/images/car.png',
    name: '婚恋顾问@周周',
    description: '金牌婚恋顾问',
  },
  {
    image: '../../../static/images/car.png',
    name: '婚恋顾问@洋洋',
    description: '金牌婚恋顾问',
  },
  {
    image: '../../../static/images/car.png',
    name: '婚恋顾问@洋洋',
    description: '金牌婚恋顾问',
  },
])

const goMyMatchmaker = () => {
  uni.navigateTo({ url: '/pages/matchmaker/mymatchmaker/mymatchmaker' })
}
</script>

<template>
  <view class="title">
    <image src="@/static/images/title.png" mode="scaleToFill" class="title-image" />
  </view>
  <view class="introduce">一对一会员服务，提供恋爱、婚姻、个人提升等全方位情感咨询服务</view>
  <!-- 红娘团队展示 -->
  <view class="matchmaker-container">
    <view scroll-y="true" class="profile-cards">
      <ProfileCard
        v-for="(profile, index) in profiles"
        :key="index"
        :image="profile.image"
        :name="profile.name"
        :description="profile.description"
        class="profile-card"
      />
    </view>
  </view>
  <!-- 底部 -->
  <view class="bottom">
    <view>
      <view class="icon">
        <image
          class="bottom-icon-big"
          src="@/static/matchmaker/matchmaker1.png"
          mode="scaleToFill"
        />
      </view>

      <text class="bottom-text">幸福热线</text></view
    >
    <view>
      <view class="icon">
        <image
          class="bottom-icon-big"
          src="@/static/matchmaker/matchmaker2.png"
          mode="scaleToFill"
        />
      </view>
      <text class="bottom-text">咨询客服</text>
    </view>
    <view
      ><button @click="goMyMatchmaker" class="button">
        <image class="bottom-icon" src="@/static/matchmaker/matchmaker3.png" mode="scaleToFill" />
        我的红娘
      </button></view
    >
  </view>
</template>

<style scoped lang="scss">
.bottom-text {
  font-size: 28rpx;
  font-weight: 300;
}
.bottom-icon {
  height: 30rpx;
  width: 30rpx;
}
.bottom-icon-big {
  height: 50rpx;
  width: 50rpx;
}
.title {
  position: relative;
  /* font-family: 'Noto Sans SC', sans-serif; */
  text-align: center;
  color: black;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 800;
  .title-image {
    width: 100vw;
    height: 40vh;
  }
}

.introduce {
  font-family: 'Noto Sans SC', sans-serif;
  text-align: center;
  color: #333333;
  font-size: 30rpx;
  line-height: 2;
  width: 80%;
  margin: 0 auto;
  font-weight: 300;
}

.matchmaker-container {
  display: flex;
  justify-content: center;
  padding: 32rpx;
}

.profile-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 120rpx;
}

.profile-card {
  width: calc(50% - 16px);
  max-width: 300px;
}

.bottom {
  display: flex;
  justify-content: space-between;
  padding: 6rpx 40rpx;
  align-items: center;
  position: fixed;
  bottom: 0;
  background-color: white;
  width: 100%;
}
.icon {
  text-align: center;
}
button {
  background: #41ade3;
  color: white;
  border: none;
  padding: 8rpx 50rpx;
  border-radius: 30px;
  font-size: 26rpx;
  cursor: pointer;
  transition: background 0.3s ease;
}
.button {
  font-size: 36rpx;
}
</style>
